<template>
  <div class="body" v-if="statusText">
    <div v-if="dataList.length">
      <div v-for="item in dataList" :key="item.id">
        <div
          class="singlePicture"
          v-if="
            item.type == 1 && item.cover.length >= 1 && item.cover.length < 3
          "
        >
          <div class="left">
            <p>{{ item.title }}</p>
            <div class="news">
              <span>{{ item.user.nickname }}</span>
              <span class="comments">{{ item.comment_length }}跟帖</span>
            </div>
          </div>
          <div class="picture" v-if="item.cover[0].url">
            <img
              v-if="item.cover[0].url.indexOf('/uploads') == -1"
              :src="item.cover[0].url"
              alt=""
            />
            <img
              v-else
              :src="$axios.defaults.baseURL + item.cover[0].url"
              alt=""
            />
          </div>
        </div>
        <div
          class="morePicture"
          v-if="item.type == 1 && item.cover.length >= 3"
        >
          <p>{{ item.title }}</p>
          <div class="pictures">
            <img
              v-for="(subItem, index) in item.cover"
              :key="index"
              :src="subItem.url"
              alt=""
            />
          </div>
          <div class="news">
            <span>{{ item.user.nickname }}</span>
            <span class="comments">{{ item.comment_length }}跟帖</span>
          </div>
        </div>
        <div class="video" v-if="item.type == 2">
          <p>{{ item.title }}</p>
          <div class="videoContent">
            <img :src="item.cover[0].url" alt="" />
            <span class="iconfont iconshipin"></span>
          </div>
          <div class="news">
            <span>{{ item.user.nickname }}</span>
            <span class="comments">{{ item.comment_length }}跟帖</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty description="暂无新闻内容">
        <van-button round type="danger" class="bottom-button">
          请添加新闻
        </van-button>
      </van-empty>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      statusText: "",
    };
  },

  props: ["num"],
  created() {
    // console.log(this.num, 21);
    this.$axios({
      url: "/post",
      params: {
        category: this.num,
      },
    })
      .then((res) => {
        // console.log(res, 11);
        // console.log(res.data.data);
        // 将获取的数据绑定到data里，便以模板使用
        this.dataList = res.data.data;
        // 为了处理请求的数据还没到时会显示空状态问题，要使用响应的数据对应的属性是字符串或数字才能作为判断
        this.statusText = res.statusText;
      })
      .catch((err) => {
        console.dir(err);
        this.$toast.fail("系统错误");
      });
  },
};
</script>

<style lang="less" scoped>
.body {
  .bottom-button {
    width: 160px;
    height: 40px;
  }
  .singlePicture {
    display: flex;
    justify-content: space-between;
    padding: 10/360 * 100vw;
    border-bottom: 1px solid #e4e4e4;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 4/360 * 100vw 0;
      p {
        color: #444;
      }
      .news {
        font-size: 13/360 * 100vw;
        color: #888;
        .comments {
          font-size: 12/360 * 100vw;
          margin-left: 10/360 * 100vw;
        }
      }
    }
    .picture {
      img {
        width: 121/360 * 100vw;
        height: 75/360 * 100vw;
        margin-left: 10/360 * 100vw;
        object-fit: cover;
      }
    }
  }
  .morePicture {
    padding: 10/360 * 100vw;
    border-bottom: 1px solid #e4e4e4;
    .pictures {
      display: flex;
      justify-content: space-between;
      padding: 10/360 * 100vw 0;
      //   padding-left: 8/360 * 100vw;
      img {
        display: block;
        // width: calc(33% - 2px);
        width: 112/360 * 100vw;
        height: 75/360 * 100vw;
        object-fit: cover;
      }
    }
    .news {
      font-size: 13/360 * 100vw;
      color: #888;
      .comments {
        font-size: 12/360 * 100vw;
        margin-left: 10/360 * 100vw;
      }
    }
  }
  .video {
    padding: 10/360 * 100vw;
    border-bottom: 1px solid #e4e4e4;
    .videoContent {
      position: relative;
      margin: 10/360 * 100vw 0;
      img {
        width: 340/360 * 100vw;
        height: 170/360 * 100vw;
        object-fit: cover;
      }
      .iconshipin {
        position: absolute;
        // display: flex;
        // justify-content: center;

        text-align: center;
        width: 46/360 * 100vw;
        height: 46/360 * 100vw;
        line-height: 46/360 * 100vw;
        font-size: 40/360 * 100vw;
        color: #fff;
        background-color: #888888ab;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        &:before {
          content: "\e650";
          padding-right: 2/360 * 100vw;
        }
      }
    }
    .news {
      font-size: 13/360 * 100vw;
      color: #888;
      .comments {
        font-size: 12/360 * 100vw;
        margin-left: 10/360 * 100vw;
      }
    }
  }
}
</style>
